<template>
  <div class="home">
    <div class="top-info">
      <i class="menu-icon" @click="handleClickMenu"></i>
      <div class="info-content">
        <i class="avator"></i>
        <div class="info-detail">
          <p>杜木土</p>
          <p>我姓杜，名木土。别来无恙！</p>
        </div>
      </div>
    </div>
    <div class="middle-content">
      <home-content @handleEmitMenu='handleClickMenu' />
    </div>
    <common-footer />
    <pop-menu :ifShow="ifShow" @emitHandlePop='handleClickMenu' />
  </div>
</template>

<script>
import HomeContent from './components/HomeContent.vue'
import PopMenu from '@/components/PopMenu.vue'
import CommonFooter from '@/components/CommonFooter.vue'
export default {
  name: 'Home',
  components: { HomeContent, PopMenu, CommonFooter },
  data () {
    return {
      ifShow: false
    }
  },
  methods: {
    handleClickMenu () {
      this.ifShow = !this.ifShow
    }
  }
}
</script>

<style lang="scss" scoped>
.home {
  width: 100%;
  height: 100%;
  position: relative;
  .top-info {
    position: relative;
    width: 100%;
    height: 1.3rem;
    background: url('../../assets/images/nav-bg.jpg') 50% 50% no-repeat;
    background-size: cover;
    .menu-icon {
      display: inline-block;
      width: 0.3rem;
      height: 0.3rem;
      background: url('../../assets/images/menu_fff.svg') 50% 50% no-repeat;
      background-size: 100%;
      position: absolute;
      top: 0.1rem;
      right: 4%;
    }
    .info-content {
      width: 92%;
      height: 1.1rem;
      background-color: rgba(255, 255, 255, 1);
      border-radius: 0.2rem;
      position: absolute;
      top: 0.75rem;
      left: 4%;
      box-shadow: 0px 10px 15px -10px #ddd;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      padding-left: 0.32rem;
      box-sizing: border-box;
      .avator {
        min-width: 0.65rem;
        height: 0.65rem;
        background: url('../../assets/images/avator.jpg') 50% 50% no-repeat;
        background-size: 100%;
        border-radius: 50%;
        margin-right: 0.15rem;
      }
      .info-detail {
        p {
          &:first-child {
            font-size: 0.18rem;
            font-weight: bold;
            margin-bottom: 0.08rem;
          }
          &:last-child {
            font-size: 0.14rem;
            color: #a5a5a5;
          }
        }
      }
    }
  }
  .middle-content {
    width: 100%;
    margin: 0.55rem 0 0.2rem 0;
  }
}
</style>
